<template>
  <div class="boxs">
      <!-- 项目标题 -->
       <div>
          <el-date-picker
            @change="searchB"
           
            v-model="times"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="处方日期"
            end-placeholder="处方日期"
          >
          </el-date-picker>
        </div>
       <h2 class="">
     
        <div>费用合计：{{data.total}}</div>
    </h2>
    <div class="memberImfo" v-if="data.member_info">   
        <div>
            <div v-if="data.member_info.member">姓名：<span>{{data.member_info.member.name}}</span></div>
            <div>住院号：<span>{{data.member_info.ipt_no}}</span></div>
            <div>病区:<span>{{data.member_info.room_name}}</span></div>
        </div>
        <div>
          <div>科室：<span>{{data.member_info.department_name}}</span></div>
            <div>入院时间：<span>{{data.member_info.begntime}}</span></div>
            <div> 出院时间：<span>{{data.member_info.leave_time}}</span></div>
            
        </div>
    </div>
    <el-row  >
      <el-col v-for="(item,index) in table.row1" :span="2" :key="'1'+index">
          <div v-if="index%2===0" class="grid-content bg-purple-dark title">项目</div>
          <div v-if="index%2!==0" class="grid-content bg-purple-dark title">金额</div>
      </el-col>
     </el-row>
     <!-- 项目内容 -->
    <el-row v-for="(item2,five) in calculateFive" style="width:100%" :key="'2'+five">
      
         <el-col :span="4"  v-for="(item3,index3) in item2" :key="'3'+index3">
       
            <el-col :span="12"
              ><div class="grid-content bg-purple-dark cont">{{item3.cate_name}}</div>
            </el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple-dark cont">{{item3.money}}</div></el-col
            >
          </el-col>
      
    </el-row>

     <el-row>
      <el-col v-for="(item,index) in table.row2" :span="10" :key="'4'+index">
          
          <el-col :span="8"
              ><div class="grid-content bg-purple-dark title">药品名称</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark title">甲乙类 &nbsp;&nbsp;数量</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark title">金额</div>
            </el-col>
     </el-col>
      </el-row>
   <el-row v-for="(item1,index1) in calculateDrug" :key="'5'+index1">
    <el-col v-for="(item2,index2) in item1"  :span="10" :key="'6'+index2">
          
          <el-col :span="8"
              ><div class="grid-content bg-purple-dark cont">{{item2.business_name}}</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark cont">{{item2.number}}</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark cont">{{item2.money}}</div>
            </el-col>
     </el-col>
    </el-row>


    
     <el-row>
      <el-col v-for="(item,index) in table.row2" :span="10" :key="'7'+index">
          
          <el-col :span="8"
              ><div class="grid-content bg-purple-dark title">费用名称</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark title">数量</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark title">金额</div>
            </el-col>
     </el-col>
      </el-row>


      <el-row v-for="(item1,index1) in calculateSer" :key="'8'+index1">
    <el-col v-for="(item2,index2) in item1"  :span="10" :key="'9'+index2">
          
          <el-col :span="8"
              ><div class="grid-content bg-purple-dark cont">{{item2.business_name}}</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark cont">{{item2.number}}</div>
            </el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-dark cont">{{item2.money}}</div>
            </el-col>
     </el-col>
    </el-row>
 
  </div>
</template>

<script>
let t;

const month1=(new Date().getMonth()+1)<10?'0'+(new Date().getMonth()+1):(new Date().getMonth()+1);
const data1=new Date().getDate()<10?'0'+new Date().getDate():new Date().getDate();
export default {
  name:'feeList',
  props: ["id",'uid'],
  data() {
    
    return {
     
      times: [new Date().getFullYear()+'-'+month1+'-'+data1, new Date().getFullYear()+'-'+month1+'-'+data1],
        table:{
            row1:10,
            row2:2,
            cate_col:5,
        },
        data:{
            cate:[{'cate_name':'','money':'0.00'}],//1
            drug:[{'business_name':'','money':'0.00','number':''}],
            ser:[{'business_name':'','money':'0.00','number':''}],
            member_info:{member:{}},
        },
    };
  },
  mounted() {
    t = this;

    t.getList();
  },
computed: {
   
    calculateTen: function() {
      let ten = []
   
      for(let i = 0; i < this.data.cate.length; i+=10) {
        
            ten.push(this.data.cate.slice(i,i+10))
      }
      console.log("ten",ten)
      return ten;
    },
      calculateFive:function() {
        let five = []
   
     
      for(let i = 0; i < this.data.cate.length; i+=5) {
        
            five.push(this.data.cate.slice(i,i+5))
      }
    
      for(let i=0;i<five.length;i++){
          
          for(let k=five[i].length;k<5;k++){
              // five[i].push({'cate_name':'','money':0.00})

             this.$set( five[i],k,{'cate_name':'','money':'0.00'})
          }
      }
       
         console.log("five",five)
      return five;
    },

    calculateDrug:function() {
      let drug = []
   
      for(let i = 0; i < this.data.drug.length; i+=2) {
        
            drug.push(this.data.drug.slice(i,i+2))
      }
      console.log("drug",drug)

        for(let i=0;i<drug.length;i++){
          
          for(let k=drug[i].length;k<2;k++){
              // five[i].push({'cate_name':'','money':0.00})

             this.$set( drug[i],k,{'business_name':'','money':'0.00','number':''})
          }
      }
      return drug;
    },
    calculateSer:function() {
      let ser = []
   
      for(let i = 0; i < this.data.ser.length; i+=2) {
        
            ser.push(this.data.ser.slice(i,i+2))
      }
      console.log("ser",ser)

        for(let i=0;i<ser.length;i++){
          
          for(let k=ser[i].length;k<2;k++){
            

             this.$set( ser[i],k,{'business_name':'','money':'0.00','number':''})
          }
      }
      return ser;
    },
    
  }, 
  methods: {
   searchB(){
        this.fullscreenLoading = true;
      t.getList()
   },
    getList() {
      
     console.log("tis.times",this.times)
      let d = {
        hospital_id: this.id,
       times: this.times ? ((this.times.toString()).replace(',', '|')).toString() : '',
      };
    
         const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });    
          
      t["_API"].getHospitalizationGetMemberFeeList(d).then((res) => {
           loading.close();
        console.log("res", res);
        if (res.code == 200) {
          this.data=res.data;
          
        }
      });
    },
  },
};
</script>

<style scoped  lang="scss">
.boxs {
  width: 80%;
  margin: 0 auto;
}
.el-row {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
 
 
}
.el-col {
  border-radius: 4px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:10px 0;
  height: 38px;
}
.cont {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 10px 10px ;
  height: 38px;
}
.bg-purple-dark {
  // background: #99a9bf;
     border: 1px solid #000000;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.userinfo{
  margin-top: 10px;
  display: flex;
  >div{
    flex:1;
    text-align: right;
  }
}
.memberImfo{
  >div{
    display: flex;
    align-items: center;
    >div{
      flex:1;
      font-size: 16px;
      padding-bottom: 10px;
      span{
        font-weight: bold;
      }
    }
  }
}
</style>